<!-- 通用模态框组件 -->
<div id="<%= modalId %>" style="margin-top: 0px;"
     class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 invisible transition-all duration-300">
    <div class="bg-white rounded max-w-2xl mx-4 relative transform scale-90 transition-transform duration-300"
         id="<%= modalId %>Content">
        <!-- 关闭按钮 -->
        <button onclick="closeModal('<%= modalId %>')" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 transition-colors z-10">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>

        <!-- 模态框内容 -->
        <%- content %>
    </div>
</div>

<script>
    // 显示模态框
    function showModal(modalId) {
        const modal = document.getElementById(modalId)
        const content = document.getElementById(modalId + 'Content')

        modal.classList.remove('opacity-0', 'invisible')
        content.classList.remove('scale-90')
        content.classList.add('scale-100')
    }

    // 关闭模态框
    function closeModal(modalId) {
        const modal = document.getElementById(modalId)
        const content = document.getElementById(modalId + 'Content')

        content.classList.remove('scale-100')
        content.classList.add('scale-90')

        setTimeout(() => {
            modal.classList.add('opacity-0', 'invisible')
        }, 200)
    }

    // 点击背景关闭
    document.addEventListener('click', function (e) {
        if (e.target.id && e.target.id.includes('Modal') && !e.target.id.includes('Content')) {
            const modalId = e.target.id
            closeModal(modalId)
        }
    })

    // ESC 键关闭所有模态框
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') {
            // 关闭所有打开的模态框
            const modals = document.querySelectorAll('[id$="Modal"]')
            modals.forEach(modal => {
                if (!modal.classList.contains('invisible')) {
                    closeModal(modal.id)
                }
            })
        }
    })
</script>